<template>
    <div>
        <div class="container" style="padding-left: 20%;">
            <el-form :model="userForm" :label-width="labelWidth" 
            style="max-width: 600px;">
                <el-form-item>
                    <el-row>
                        <el-col :span="16" style="text-align: center;">
                            <el-upload 
                            ref="chargeFormRef" 
                            class="avatar-uploader" 
                            :show-file-list="false"
                                :auto-upload="false"
                                 :on-change="handleChange">
                                <el-avatar v-if="chargeForm.imageUrl" 
                                :src="chargeForm.imageUrl" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                                   
                               <template #tip>
                                 <p style="text-align: center; font-size: 18px;">点击更换头像</p>
                               </template> 
                            </el-upload>
                        
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model="userForm.userName" disabled="" />
                </el-form-item>
                <el-form-item label="真实姓名">
                    <el-input v-model="userForm.realName" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="userForm.tel" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-radio-group v-model="userForm.gender">
                        <el-radio value="男" label="男">男</el-radio>
                        <el-radio value="女" label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-input v-model="userForm.registerTime" disabled />
                </el-form-item>
                <el-form-item label="上次登录时间" disabled>
                    <el-input v-model="userForm.lastLoginTime" disabled />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted,nextTick } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const  labelWidth=ref(120)
//信息的收集
let chargeForm = reactive({
    imageUrl: '/api/upload/tx.jpg',
})
const chargeFormRef = ref()
const userForm = reactive({
    id: 2,
    userName: '超级管理员',
    realName: '张老师',
    tel: '136123456789',
    gender: '男',
    registerTime: '2024-12-11',
    lastLoginTime: '2024-12-01',
    file: null
})
const save = () => {
    //调用后端接口保存用修改之后的信息
    // saveUser(userForm).then(res => {
    //     chargeForm.imageUrl = '/api/' + res.data.data
    // })
}

const handleChange = (uploadFile) => {
    //选中图片的回显
    chargeForm.imageUrl = URL.createObjectURL(uploadFile.raw)
    userForm.file = uploadFile.raw
}

onMounted(() => {
    // 页面挂在完成 根据id 查询用户信息 
    nextTick()

})
</script >
<style lang="less" scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.handle-box {
    margin-bottom: 20px;
}
.handle-input {
    float: right;
    width: 240px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #F56C6C;
}

.blue {
    color: #1296e2;
    font-weight: bold;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.cell {
    display: inline-block;

    .el-button {
        margin-left: 0px;
    }
}

.right-btn {
    justify-content: center;

    .el-button {
        margin-right: 6px;
        padding: 1px 5px;
    }
}

.form-demo {
    .el-input {
        width: 60%;
    }

    .el-input-number {
        width: 60%;
    }

}

.handle-input .el-input-group__append button.el-button,
.el-input-group__append button.el-button:hover {
    background-color: #1C84C6;
    color: #fff;
    font-weight: 700;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    /* border-radius: 6px; */
    border-radius: 150px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);

}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>